import React, { Fragment, PureComponent } from 'react'
import widthRouter from '../../hoc/withRouter'
import { nanoid } from '@reduxjs/toolkit'

export class User extends PureComponent {
  constructor(){
    super()
    this.state = {
      id:0,
      arr:[]
    }
  }
  getNanoid(){
    let arr = this.state.arr
    arr.push({id:nanoid(),text:'txt-nanoid'})
    this.setState({
      id:nanoid(),
      arr
    },() =>{
      console.log(this.state)
    })
    
  }
  goApp(){
    this.props.router.navigate('/')
  }
  render() {
    console.log(this.props)
    const {arr} = this.state
    return (
      <div>
        User:<button onClick={e =>{this.goApp()}}>goApp</button>
       
       {
        arr.map(item =>{
          return (
            <Fragment key={item.id}>
              <h5>{item.text}:{item.id}</h5>
            </Fragment>
          )
        })
       }
        <p>
         <button onClick={e =>{this.getNanoid()}}>getNanaid</button>
        </p>
      </div>
    )
  }
}

export default widthRouter(User)